<template>
  <div>
    <Tabs class="tabs-app" type="card">
      <TabPane :label="$t('module.appManage.selfBuiltApplication')" key="inner" class="tab-pane">
        <inner-app-list @click="onInnerAppClick" style="width:35%" />
        <app-assign :appInfo="innerAppInfo" />
      </TabPane>
      <TabPane :label="$t('module.appManage.thirdPartyApplications')" key="outer" class="tab-pane">
        <outer-app-list @click="onOuterAppClick" style="width:35%" />
        <app-assign :appInfo="outerAppInfo" />
      </TabPane>
    </Tabs>
  </div>
</template>
<script>
import InnerAppList from "./InnerAppList.vue";
import OuterAppList from "./OuterAppList.vue";
import AppAssign from "./AppAssign.vue";
import locales from "./locales.js";

// 应用类型-自建应用
const APP_TYPE_INNER = 0;
// 应用类型-第三方应用
const APP_TYPE_OUTER = 1;

export default {
  name: "app-assign-user",
  mixins: [locales],
  components: { InnerAppList, OuterAppList, AppAssign },
  props: {},
  data() {
    return {
      innerAppInfo: {},
      outerAppInfo: {},
      appName: "",
      appCode: "",
      appId: "",
      appType: this.APP_TYPE_INNER,
      topic: ""
    };
  },
  computed: {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    onInnerAppClick(row) {
      let innerAppInfo = {};
      innerAppInfo.appCode = row.applicationCode;
      innerAppInfo.appName = row.applicationName;
      innerAppInfo.appId = row.applicationId;
      innerAppInfo.appType = APP_TYPE_INNER;
      innerAppInfo.topic = "";
      this.innerAppInfo = innerAppInfo;
    },
    onOuterAppClick(row) {
      let outerAppInfo = {};
      outerAppInfo.appCode = row.vsiKey;
      outerAppInfo.appType = APP_TYPE_OUTER;
      outerAppInfo.topic = row.vsiDescription;
      this.outerAppInfo = outerAppInfo;
    }
  },
  watch: {},
  directives: {}
};
</script>
<style lang="less">
.tabs-app {
  height: 100%;
  .ivu-tabs-bar {
    margin-bottom: 0px;
  }
  .single-table-con {
    padding: 0px 10px 0;
  }

  .tab-pane {
    display: flex;
  }
  .ivu-tabs-content-animated {
    height: calc(~"100% - 42px");
  }
}
</style>
